<template>
  <div>
    <span @click="onShowModal">
      <slot></slot>
    </span>

    <el-drawer
      destroy-on-close
      append-to-body
      direction="rtl"
      show-close
      title="催单"
      v-model="reminderDrawerVisible"
      size="22%"
    >
      <div class="ul_timeline" v-loading="loading" element-loading-text="加载中...">
        <div class="content">
          <el-empty description="暂无数据" v-if="total == 0" />
          <el-timeline v-else class="first_pane">
            <el-timeline-item
              class="box-card"
              v-for="(reminder, index) in reminderList"
              :color="color[index % 4]"
              :key="index"
              :timestamp="reminder.createTime"
              placement="top"
            >
              <el-card>
                <template #header>
                  <div class="card-header">
                    <h4>{{ reminder.empType }}</h4>
                  </div>
                </template>
                <div class="c_network" :class="colorBg[index % 4]">
                  {{ '【' + reminder.empType + '】 ' + reminder.emp }}
                </div>
                <div class="c_note">{{ reminder.content }}</div>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
      <template #footer>
        <el-pagination
          class="page_bo"
          hide-on-single-page
          size="small"
          @current-change="getList"
          :current-page="currentPage"
          :page-size="pageSize"
          :total="total"
          layout="total, prev, pager, next"
        />
        <div class="form">
          <el-form ref="formRef" :rules="rules" :model="form" v-loading="saveReminderLoading">
            <div style="display: flex; flex-direction: column; gap: 20px; align-items: flex-end">
              <div style="width: 100%">
                <el-form-item required label="提醒人员" prop="remindEmpType">
                  <el-select
                    multiple
                    collapse-tags
                    collapse-tags-tooltip
                    :max-collapse-tags="2"
                    placeholder="请选择"
                    v-model="form.remindEmpType"
                  >
                    <el-option
                      v-for="item in remindEmpTypeOptional"
                      :key="item.label"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </div>
              <div style="width: 100%">
                <el-form-item required label="提醒内容" prop="content">
                  <el-input
                    v-model="form.content"
                    type="textarea"
                    placeholder="请输入提醒内容"
                    :rows="8"
                  />
                </el-form-item>
              </div>
              <HButton isModal type="primary" @click="onSend">发送</HButton>
            </div>
          </el-form>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
  import { ref, watch } from 'vue'
  import { ElMessage, FormInstance, FormRules } from 'element-plus'
  import { getReminderList } from '@/api/order'
  import { Reminder } from './types'
  import useSaveReminderService from '@/components/pages/order/index/Reminder/service'
  import HButton from '@/components/common/button/HButton.vue'

  const props = defineProps<{
    orderIds: Array<string>
  }>()

  const emits = defineEmits<{
    (e: 'update')
  }>()

  // 表单组件实例
  const formRef = ref<FormInstance | null>(null)

  // 使用服务
  const { form, saveReminderLoading, saveReminderFn } = useSaveReminderService(props.orderIds)

  const color = ['#007cff', '#a06eff', '#00c0c0', '#e69103']
  const colorBg = ['back_c4', 'back_c3', 'back_c2', 'back_c1']

  // 抽屉状态
  const reminderDrawerVisible = ref(false)

  // 催单记录列表
  const reminderList = ref<Array<Reminder>>([])

  // 提醒人员类型下拉选项：1-工单客服，2-服务商负责人，3-工程师
  const remindEmpTypeOptional = ref([
    { label: '工单客服', value: 1 },
    { label: '服务商负责人', value: 2 },
    { label: '工程师', value: 3 },
  ])

  // 验证规则
  const rules = ref<FormRules<typeof form>>({
    remindEmpType: [
      {
        required: true,
        message: '请选择提醒人员',
        trigger: ['change', 'blur'],
      },
    ],
    content: [
      {
        required: true,
        message: '请填写催单内容',
        trigger: ['change', 'blur'],
      },
    ],
  })

  // 列表总条数
  const total = ref(0)
  let pageSize = ref(10)
  let currentPage = ref(1)
  let loading = ref(false)

  async function getList(page: number) {
    currentPage.value = page
    let data = {
      limit: pageSize.value,
      page: page,
    }
    loading.value = true
    const res = await getReminderList(data, props.orderIds)
    if (res.data.success) {
      reminderList.value = res.data.data.rows
      total.value = Number(res.data.data.total)
    } else {
      if (res.data.isError)
        ElMessage({
          showClose: true,
          message: res.data.message,
          type: 'error',
          duration: 4000,
        })
    }
    loading.value = false
  }

  // 发送按钮点击事件
  const onSend = async () => {
    if (formRef.value) {
      try {
        await formRef.value.validateField()
        await saveReminderFn()
        await getList(1)
        if (formRef.value) {
          formRef.value.resetFields()
        }
        emits('update')
      } catch (e) {
        // 验证不通过
      }
    }
  }

  /**
   * 显示弹窗事件
   */
  const onShowModal = () => {
    reminderDrawerVisible.value = true
    getList(1)
  }

  watch(
    () => props.orderIds,
    (value) => {
      form.value.workIds = value
    },
    { immediate: true },
  )
</script>

<style lang="scss" scoped>
  :deep(.el-card__header) {
    padding: 10px 0;
    margin: 0 10px;
  }

  :deep(.el-card__body) {
    padding: 0 10px;
    font-size: 12px;
  }

  :deep(.el-card) {
    &.is-always-shadow {
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
    }

    border: none;
    border-radius: 0;
  }

  .box-card {
    padding-bottom: 20px;

    .back_c1 {
      background-color: #f5eee3;
      color: #e69103;
    }

    .back_c2 {
      background-color: #d2f7f7;
      color: #00c0c0;
    }

    .back_c3 {
      background-color: #eee9fa;
      color: #a06eff;
    }

    .back_c4 {
      background-color: #e4eef8;
      color: #007cff;
    }

    .c_network {
      padding: 4px 5px;
      display: inline-block;
      font-size: 12px;
      margin-top: 10px;
    }

    .c_note {
      color: #999;
      margin: 8px 0;
    }

    :deep(.el-timeline-item__node--normal) {
      left: 0;
    }

    :deep(.el-timeline-item__tail) {
      left: 5px;
    }

    :deep(.el-timeline-item__wrapper) {
      padding-left: 20px;
      top: -5px;
    }
  }

  .page_bo {
    display: flex;
    justify-content: center;
    margin-top: 12px;
    color: #999;
    font-size: 12px;
  }
</style>
